<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <style>
        .clock {
            height: 600px;
            width: 600px;
            border-radius: 50%;
            border: 3px solid black;
            position: relative;
        }
        .num {
            position: absolute;
            font-size: 32px;
            top: 50%;
            left: 50%;
            /* transform: translateY(-270px) translate(-50%, -50%); */
        }
        .scale {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 10px;
            width: 1px;
            background: black;
        }
        .scale.long {
            height: 16px;
        }

        .hour-hand,
        .minute-hand,
        .second-hand {
            position: absolute;
            background: black;
            top: 50%;
            left: 50%;
            transform-origin: center top;
            transform: translateX(-50%) rotate(180deg);
        }

        .hour-hand {
            height: 120px;
            width: 8px;
        }
        .minute-hand {
            height: 180px;
            width: 4px;
        }
        .second-hand {
            height: 240px;
            width: 1px;
            display: none;
            transition: transform 1s linear;
        }

    </style>
</head>
<body>
    <div class="clock">
        <!-- <div class="num">1</div> -->
        <!-- <div class="scale"></div> -->
        <!-- 时针 -->
        <div class="hour-hand"></div>
        <!-- 分针 -->
        <div class="minute-hand"></div>
        <!-- 秒针 -->
        <div class="second-hand"></div>
    </div>
    <script src="./moment.js"></script>
    <script>

        const clock = document.querySelector('.clock');

        // 生成1到12的数字
        function createNumbers () {
            for (let i = 0; i < 12; i++) {
                const num = i === 0 ? 12 : i;
                const alpha = i * 30;
                const div = document.createElement('div');
                div.setAttribute('class', 'num');
                div.setAttribute('style', `transform: translate(-50%, -50%) rotate(${ alpha }deg) translateY(-270px) rotate(${ -alpha }deg)`);
                div.innerText = num;
                clock.appendChild(div);
            }
        }

        // 生成刻度
        function createScales () {
            for (let i = 0; i < 60; i++) {
                const alpha = i * 6;
                const length = i % 5 === 0 ? 16 : 10;
                const div = document.createElement('div');
                div.setAttribute('class', i % 5 === 0 ? 'scale long' : 'scale');
                div.setAttribute('style', `transform: translate(-50%, -50%) rotate(${ alpha }deg) translateY(-${ 300 - length * .5 }px)`);
                clock.appendChild(div);
            }
        }

        createNumbers();
        createScales();


        // 时分秒针的DOM
        const hourHand = document.querySelector('.hour-hand');
        const minuteHand = document.querySelector('.minute-hand');
        const secondHand = document.querySelector('.second-hand');

        let angleBase = 0;
        function setAngle(el, angle) {
            if (angle === 0) {
                angleBase += 360;
            }
            el.setAttribute('style', `display: block; transform: translateX(-50%) rotate(180deg) rotate(${ angleBase + angle }deg);`);
        }

        function run() {
            // 获取当前时间
            const now = moment();
            const hour = +now.format('HH'); // 10
            const minute = +now.format('mm'); // 29
            const second = +now.format('ss'); // 30

            // 角度
            const hourAngle = (hour + minute / 60 + second / 3600) * 30;
            const minuteAngle = (minute + second / 60) * 6;
            const secondAngle = second * 6;

            // 设置角度
            setAngle(hourHand, hourAngle);
            setAngle(minuteHand, minuteAngle);
            setAngle(secondHand, secondAngle);
        }

        // 每秒获取当前时间
        run();
        setInterval(run, 1000);


    </script>

</body>
</html>
